<template>
    <div>
      <!-- <el-button @click="showFilter = true">筛选</el-button>
      <el-dialog :visible.sync="showFilter" title="指标" @onClose="onClose">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedtarget" @change="handleCheckedtargetChange">
          <el-checkbox v-for="city in target" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
        <span slot="footer" class="dialog-footer">
          <el-button @click="onClose">关闭</el-button>
        </span>
      </el-dialog> -->
      
      <!-- <v-chart :option="" /> -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="资源监控" name="1"></el-tab-pane>
        <el-tab-pane label="日志" name="2"></el-tab-pane>
        <el-tab-pane label="监控指标" name="3"></el-tab-pane>
        <log-active :active="activeName" v-if="detailData.status == 'running'" />
        <!-- <el-tab-pane label="定时任务补偿" name="4"></el-tab-pane> -->
      </el-tabs>
    </div>
  </template>
  
  <script>
  import logActive from './module/log-active.vue'
  export default {
    data () {
      return {
        activeName: '1',
        showFilter: false,
        checkAll: false,
        checkedtarget: ['上海', '北京'],
        target: [],
        isIndeterminate: true
        //  detailData: {}
      };
    },
    props: ['detailData'],
    async mounted () {
      this.$nextTick(async () => {
        console.log(this.detailData)
        console.log(this.$socket)
        await this.getData()
        this.handleFilterStorage()
      })
    },
    components: {
      logActive
    },
    methods: {
      handleClick() {},
      async getData() {
        await new Promise(resolve => {
            setTimeout(() => {
              this.target = ['上海', '北京', '广州', '深圳']
              resolve()
            }, 1000)
        })
        return
      },
      onClose() {
        this.showFilter = false
      },
      handleCheckAllChange(val) {
        this.checkedtarget = val ? this.target : [];
        this.isIndeterminate = false;
      },
      handleCheckedtargetChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.target.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.target.length;
      },
      handleFilterStorage() {
        let thisTarget = null
        let targetStorage = localStorage.getItem('targetStorage') ? JSON.parse(localStorage.getItem('targetStorage')) : null
        if (targetStorage) {
          thisTarget = targetStorage[this.$route.query.id]
        } else {
          localStorage.setItem('targetStorage', JSON.stringify({}))
        }
        console.log(thisTarget)
      }
    }
  }
  </script>
  <style lang="less" scoped>
  
  </style>